import { ref } from 'vue'
import { useDark, useToggle } from '@vueuse/core'

export const isDark = useDark({
  storageKey: 'theme',
  valueDark: 'dark',
  valueLight: 'light',
  initialValue: 'auto'
})

export const useThemeStore = (themeKey = 'theme') => {


  const toggleDark = useToggle(isDark)

  const setTheme = (val) => {
    localStorage.setItem(themeKey, val, { immediate: true })
  }
  const getTheme = () => {
    return localStorage.getItem(themeKey) || 'light'
  }
  return {
    setTheme,
    getTheme,
    toggleDark
  }
}
